<template>
    <div id="ptPubCom">
        <!--后退-->
        <img style="height:0.75rem;width:0.4rem;margin:0.9rem 0.6rem;" src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <div id="content" style="height:21rem;color:#393b40;width:80%;background:#fff;margin:auto;box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #e2e2e2;border-radius:13px;">
            <p style="padding-top:0.75rem;width:100%;text-align:center;font-size:1rem;">{{showData.taskName}}</p>
            <section style="display:flex;justify-content:space-between;padding:0.75rem;height:1.75rem;line-height:1.75rem;">
                <img style="height:1.25rem;line-height:1.25rem;"src="../../assets/tabber/money.png" alt="">
                <p style="font-size:0.9rem;margin-right:0.75rem;">{{showData.amount}}￥</p>
                <p style="font-size:0.8rem;margin-right:4rem;"><span v-if="showData.allSumD">{{showData.allSumD}}</span><span v-if="showData.manSumD">{{showData.manSumD}}</span><span v-if="showData.womanSumD">{{showData.womanSumD}}</span>人/天</p>
                <p style="font-size:0.8rem;">{{showData.common1}}</p>
            </section>
             <p> <textarea placeholder="兼职内容及时间" v-model="showData.taskExplain" style="padding:0.5rem;font-size:0.9rem;
                    height:6rem;width:90%;border-radius:4px;margin-left:0.75rem;margin-top:0.75rem;"type="text"></textarea>
            </p>
            <section style="display:flex; font-size:0.8rem;padding:0px 0.75rem;border-radius:4px;margin-top:0.75rem;">
                <img style="height:2rem;width:1.75rem;margin-right:0.8rem;" src="../../assets/task/map.png" alt="">  
                <input placeholder="工作地点" v-model="showData.taskLocation" style="padding:0.25rem; width:14rem;" type="text">             
            </section>
            <section style="display:flex; font-size:0.8rem;padding:0px 0.75rem;;border-radius:4px;margin-top:0.75rem;">
                <img style="height:1.55rem;width:1.75rem;margin-right:0.8rem;" src="../../assets/tabber/data.png" alt="">  
                <p style="height:1.5rem;line-height:1.5rem;">{{showData.beginTime}}--{{showData.endTime}} </p>         
            </section>
            <section v-if="showData.allSum" style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0px 0.75rem;border-radius:4px;margin-top:0.75rem;width:12rem;">
                <img style="height:1.55rem;width:1.75rem;margin-right:0.8rem;" src="../../assets/homepage/un.png" alt="">  
                <p style="height:1.5rem;line-height:1.5rem;">{{showData.allSum}}/{{showData.allSum}} </p>   
                <p style="height:1.5rem;line-height:1.5rem;">人/天 </p>             
            </section>
            <section v-if="showData.womanSum" style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0px 0.75rem;border-radius:4px;margin-top:0.75rem;width:12rem;">
                <img style="height:1.55rem;width:1.75rem;margin-right:0.8rem;" src="../../assets/homepage/gril.png" alt="">  
                <p style="height:1.5rem;line-height:1.5rem;">{{showData.womanSum}}/<span v-if="showData.manSum">{{Number(showData.manSum)+Number(showData.womanSum)}}</span><span v-if="!showData.manSum">{{showData.womanSum}}</span> </p>   
                <p style="height:1.5rem;line-height:1.5rem;">人/天 </p>             
            </section>
            <section v-if="showData.manSum" style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0px 0.75rem;border-radius:4px;margin-top:0.75rem;width:12rem;">
                <img style="height:1.55rem;width:1.75rem;margin-right:0.8rem;" src="../../assets/homepage/boy.png" alt="">  
                <p style="height:1.5rem;line-height:1.5rem;">{{showData.manSum}}/<span v-if="showData.womanSum">{{Number(showData.manSum)+Number(showData.womanSum)}}</span><span v-if="!showData.womanSum">{{showData.manSum}}</span </p>   
                <p style="height:1.5rem;line-height:1.5rem;">人/天 </p>             
            </section>
        </div>
        <!--确定-->
        <div style="width:100%;position:absolute;bottom:0px;display:flex;height:2.5rem;line-height:2.5rem;text-align:center;" >
            <p style="background:#fff;width:50%;color:#29a193;">总计<span>{{showData.amount}}</span></p>
            <p @click="payOff()" style="background:#29a193;width:50%;color:#ffffff;">确定支付</p>
        </div>
       
        <!--支付-->
        <div id="payWindow" style="display: none;">  
        </div>
        <div id="payLayer" style="display: none;color:#8a8a8a;font-size:0.7rem;">  
           <p style="width:80%;height:2.25rem;margin:auto;line-height:3.5rem;font-size:1rem;text-align:center;font-weight:bold;">
                请输入四位交易密码
                <img @click="closePay()" style="width:1rem;height:10x;float:right;margin-top:1.25rem;" src="../../assets/task/chanelB.png" alt="">
            </p> 
            <section style="width:80%;margin:2.5rem auto;font-size:1rem;display:flex;justify-content: space-around;">
                <input ref="input1" v-model="iput1" maxlength="1" v-focus style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                <input ref="input2" v-model="iput2" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                <input ref="input3" v-model="iput3" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                <input ref="input4" v-model="iput4" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
            </section> 
            <p style="width:50%;background:#29a193;margin:auto;text-align:center;height:2.5rem;line-height:2.5rem;color:#fff;font-size:0.7rem;display:flex;
            justify-content: space-around;border-radius:13px;" @click="confirmSure">确定</p>
        </div> 
    </div>
</template>
<script>
export default {
  data () {
    return {
        checkPsw:{
            password:undefined,
        },
        iput1:'',
        iput2:'',
        iput3:'',
        iput4:'',
        countData:{},
        showData:{},
        alterSch:false,
        radio: '1',
    }
  },
  watch:{
      iput1: function (val) {
        if(val!=''){
          this.$refs.input1.blur();
          this.$refs.input2.focus();
        }
      },
      iput2: function (val) {
        if(val!=''){
          this.$refs.input2.blur();
          this.$refs.input3.focus();
        }
      },
      iput3: function (val) {
        if(val!=''){
          this.$refs.input3.blur();
          this.$refs.input4.focus();
        }
      },
      iput4: function (val) {
        if(val!=''){
          this.$refs.input4.blur();
        }
      }
    },
     directives: {
      focus: {
        // 自定义指令聚焦
        inserted: function (el) {
          el.focus()
        }
      }
    },
  mounted(){
        this.getParams()
  },
  methods:{
    //   通过验证并跳转
        confirmSure(){
            if(this.showData.allSum){
                this.showData.amount = Number(this.showData.amount)*Number(this.showData.allSum)
            }
             this.checkPsw.password = this.iput1+this.iput2+this.iput3+this.iput4
             this.$api.checkPayPsw(this.checkPsw).then((res)=>{
              if(res.code == '000000'){
                    this.$api.addSingTask(this.showData).then((res)=>{
                        if(res.code == '000000'){
                              if(this.countData.allcount==this.countData.count){
                                    this.$router.push({
                                        path: '/cueMsg',
                                    })
                                }
                                if(this.countData.allcount>this.countData.count){
                                    this.countData.count = Number(this.countData.count) + 1
                                    this.$router.push({
                                        path: '/partTimePub/'+this.countData.allcount+'/'+this.countData.count,
                                    })
                                }
                            // this.$router.push({path:'/cueMsg'})
                        }
                    })
              }else{
                  return
              }
          })
        //     this.$api.addSingTask(this.showData).then((res)=>{
        //       if(res.code == '000000'){
        //       }
        //   })
          
        },
        alterAddress(){  
            document.getElementById('alterWindow').style.display = 'block';  
            document.getElementById('showLayer').style.display = 'block';        
        },
        payOff(){
            document.getElementById('payWindow').style.display = 'block';  
            document.getElementById('payLayer').style.display = 'block';
        },
        closeDiv() {  
            document.getElementById('alterWindow').style.display = 'none';  
            document.getElementById('showLayer').style.display = 'none';  
        },
        closePay() {  
            document.getElementById('payWindow').style.display = 'none';  
            document.getElementById('payLayer').style.display = 'none';  
        },
        dropMenu(){
            this.alterSch=!this.alterSch;
        },
         getParams () {
            this.countData = this.$route.params;
            this.showData = this.$route.query.dayCount;
        },
  }
}
</script>
<style>
#ptPubCom{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/bg.png);
}

#ptPubCom #payWindow{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    position: absolute;       
}  

#ptPubCom  #payLayer {   
    width: 84%;
    height: 40%;
    background:#ffffff;  
    left: 8%;  
    top: 30%;
    color:#000;  
    z-index: 2;  
    border-radius:13px;
    position: absolute;  
}
</style>